<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item>{{$route.meta.title}}</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <div class="resource-all-edit-container">
            <add-option ref="addOption" :id="$route.query.id" :isEdit="!!$route.query.id" :ruleForm.sync="ruleForm">
                <template>
                    <el-form-item>
                        <el-button @click="goBack">取消</el-button>
                        <el-button type="primary" @click="submitForm">确定</el-button>
                    </el-form-item>
                </template>
            </add-option>
        </div>
    </page-box>
</template>

<script lang="ts">
import Vue from "vue";
import { Component } from "vue-property-decorator";
import { State } from 'vuex-class';
import AddOption from "../components/add-option/index.vue";

interface FormModel{
    id: number;
    name: string;
    type: string;
    options: string;
    unit: string;
    department: number[];
    label: number[];
    isSearchShow: boolean;
    isDownShow: boolean;
}
@Component({
    name: "ResourceAllEditNotAlive",
    components: {
        AddOption
    }
})
export default class ResourceAllEditNotAlive extends Vue {
    @State(state => state.user.userInfo) user: any;
    // 级联选中内容
    value: any = "";
    ruleForm: any = {
        id: '',
        name: '',
        type: '',
        options: "",
        unit: '',
        label: [],
        isSearchShow: true,
        isDownShow: true
    }

    rules = {
        name: [
            { required: true, message: '请输入标签名称', trigger: 'blur' },
            { max: 100, message: '最多输入100个字符', trigger: 'blur' }
        ],
        field: [
            { required: true, message: '请输入名称对应的英文字段', trigger: 'blur' },
            { max: 100, message: '最多输入100个字符', trigger: 'blur' }
        ],
        type: [
            { required: true, message: '请选择配置类型', trigger: 'change' }
        ],
        options: [
            { required: true, message: '请添加选项' }
        ]
    }

    // 提交表单
    submitForm() {
        (this.$refs.addOption as any).submitForm(async(data: any) => {
            if (data) {
                const { id, name, field, type, options, label, isSearchShow, isDownShow, newOptions } = data;
                const url = id ? "resource/update" : "resource/add";
                const list: any = [];
                options.split(`\n`).forEach((item: any) => {
                    if (!item.match(/^[ ]*$/)) {
                        list.push({
                            name: item
                        });
                    }
                });
                const newList: any = [];
                newOptions.split(`\n`).forEach((item: any) => {
                    if (!item.match(/^[ ]*$/)) {
                        newList.push({
                            name: item
                        });
                    }
                });
                const _field = field.replace(/\s/g, "");
                const __field = _field.replace(/[`~!@#$%^&*()\-+=/\\|{[\]};':",.<>?，。、？；‘’“”【】｛｝！￥%…（）——]/g, "");
                const str = __field.split(`\n`).filter((item: any) => item).join(`\n`);
                const res = await this.$server[url]({
                    data: {
                        id,
                        name,
                        field: str,
                        options: this.$route.query.id ? newList : list,
                        valueKindId: type,
                        typeId: label[label.length - 1],
                        isSearchShow: isSearchShow ? 0 : 1,
                        isDownShow: isDownShow ? 0 : 1
                    }
                });
                if (res.data.code === 200) {
                    this.$message.success("提交成功!");
                    await this.$router.push({ path: "/resource-manage/manage" });
                } else {
                    this.$message.error(res.data.message || "接口请求错误!");
                }
            } else {
                return false;
            }
        });
    }

    goBack() {
        this.$router.go(-1);
    }
}
</script>

<style scoped lang="scss">
    ::v-deep {
        .page-base-body {
            height: calc(100% - 50px) !important;
        }
    }
    .resource-all-edit-container {
        padding: 20px 0;
        .resource-edit-form {
            width: 5.2rem;
            .form-input {
                width: 3.8rem;
            }
        }
    }
    .ask-city-cascader-box {
        width: 380px;
        margin-bottom: 10px;
    }
</style>
